<template>
  <div>
    <div class="box" :style="{ height: height + 'px' }">
      <div class="shoptop">购物车</div>
      <div :style="{ 'overflow-y': 'scroll', height: height - 34 - 50 + 'px' }">
        <van-swipe-cell v-for="data in datalist" :key="data.id">
          <van-card
            num="1"
            :price="data.price"
            desc="真不挫"
            :title="data.goodsName"
            class="goods-card"
            :thumb="data.picUrl"
          />
          <input
            type="checkbox"
            class="checkbox"
            v-model="checklist"
            :value="data"
          />
          <template #right>
            <van-button
              square
              text="删除"
              type="danger"
              class="delete-button"
              @click="deldata(data.shopID)"
            />
          </template>
        </van-swipe-cell>
      </div>
      <!-- <div class="bottom">
        <label
          ><input
            type="checkbox"
            v-model="checkall"
            @click="changecheckall"
          />全选</label
        >
      </div> -->
      <van-submit-bar :price="tatlemoney" button-text="提交订单">
        <van-checkbox v-model="checkall" @click="changecheckall"
          >全选</van-checkbox
        >
      </van-submit-bar>
    </div>
  </div>
</template>

<script>
import Vue from 'vue'
import { Toast, SwipeCell, SubmitBar } from 'vant'

Vue.use(Toast, SwipeCell, SubmitBar)
export default {
  watch: {
    checklist (newdata, olddata) {
      if (newdata.length == this.datalist.length) {
        this.checkall = true
      } else {
        this.checkall = false
      }
    }
  },
  data () {
    return {
      height: 0,
      datalist: [],
      checklist: [],
      checkall: false
    }
  },
  created () {
    if (this.$store.state.isLogin) {
      this.getShopCarData()
    } else {
      Toast.fail('未登录')
    }
    this.height = window.innerHeight - 47
  },
  mounted () {},
  methods: {
    // 获取购物车数据
    getShopCarData () {
      this.request
        .post('/api/shopcar', { userID: localStorage.getItem('userID') })
        .then((res) => {
          this.datalist = res.data.data
          this.changecheckall()
        })
    },
    // 点击全选
    changecheckall () {
      if (this.checkall) {
        this.checklist = this.datalist
      } else {
        this.checklist = []
      }
    },
    deldata (shopID) {
      this.request
        .post('/api/delShop', {
          shopID,
          userID: localStorage.getItem('userID')
        })
        .then((res) => {
          if (res.data.code == 200) {
            this.getShopCarData()
          }
        })
    }
  },
  computed: {
    // 计算金额
    tatlemoney () {
      let money = 0
      for (let i = 0; i < this.checklist.length; i++) {
        money += this.checklist[i].price
      }
      return money * 100
    }
  }
}
</script>

<style lang="less" scoped>
.box {
  overflow-y: scroll;
}
.van-card__thumb {
  width: 4.375rem;
  height: 4.375rem;
}
.delete-button {
  width: 100%;
  height: 100%;
}
.van-card__content {
  min-height: 4.375rem;
}
.van-card {
  padding: 8px 30px;
}
// 购物车操作
.van-submit-bar {
  position: static;
}
// 购物车头部
.shoptop {
  width: 100%;
  height: 34px;
  line-height: 34px;
  text-align: center;
  color: #fff;
  background-color: #ff6700;
}
.bottom {
  width: 100%;
  height: 47px;
  border-top: 1px solid #333333;
}
.checkbox {
  position: absolute;
  z-index: 10;
  top: 50%;
  transform: translateY(-50%);
  left: 5px;
}
</style>
